<template >
  <div :style="note" class="monitoring" id="zzzu1">
    <el-row :gutter="15" class="col_wapper">
      <el-col :span="8" class="col_wapper">
        <left ref="ehaetsleft" :code="code" @handle="(e)=>componentTag=e"></left>
      </el-col>
      <el-col :span="8" class="col_wapper col_center">
        <center ref="ehaetscenter" :code="code"  @handle="(e)=>componentTag=e"></center>
      </el-col>
      <el-col :span="8" class="col_wapper">
        <right ref="ehaetsright" :code="code"  @handle="(e)=>componentTag=e"></right>
      </el-col>
  <component :is="componentTag" @close="componentTag=''"></component>
    </el-row>
  </div>
</template>
<script>
import { mapState } from "vuex";
import store from "@/store";
export default {
  name: "Pagedashboard",
  // props:[],
  // 页面加载
  created() {
    if (this.$route.query.code) {
      this.code = this.$route.query.code;
    }
    if (this.$route.query.code == "32050604") {
      this.code = "320500";
    } else if (this.$route.query.code) {
      this.code = this.$route.query.code;
    } else {
      this.code = "320500";
    }
  },
  // 页面加载完成
  mounted() {

    // window.addEventListener("resize", this.onresize);
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {
    // window.removeEventListener("resize", this.onresize);
  },
  data() {
    return {
      componentTag:"",
      note: {
        backgroundImage:
          "url(" + require("@/assets/images/background.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
        backgroundSize: "100% 100%",
         
        //  background: "#09153f",
      },
 
    };
  },
  // 方法
  methods: {

    // toggleFullScreen(){
    // this.$fullscreen.toggle()
  toggleApi () {
        this.$fullscreen.toggle()
      },
    // },
    onresize() {
      this.$nextTick(() => {
        this.$refs.ehaetsleft.myChartleft.resize();
        // this.$refs.ehaetscenter.myChart.resize();
        // this.$refs.ehaetsright.myChart.resize();
        this.$refs.ehaetsright.myChartColumnar.resize();
        this.$refs.ehaetsleft.myChartleftColumn.resize();
      });
    },
   
  },
  // 监听属性
  watch: {
    // opened: function (e) {
    //   this.$nextTick(() => {
    //     setTimeout(() => {
    //       this.onresize();
    //     }, 300);
    //   });
    // },
  },
  // 组件
  components: {
    right: () => import("./components/right"),
    left: () => import("./components/left"),
    center: () => import("./components/center"),
    dialogs: () => import("./components/dialog"),
    dialog2: () => import("./components/dialog2"),
    dialog3: () => import("./components/dialog3"),
    dialog1: () => import("./components/dialog1"),
    dialog4: () => import("./components/dialog4"),
    
    
  },
  // 计算属性
  computed: {
    opened: () => store.state.app.sidebar.opened,
  
  },
};
</script>

<style lang="less" scoped>
.monitoring {
  // height: 2000px;
  // min-width: 1200px;
  min-height: 100%;
  font-size: 12px;
    overflow: auto;
    padding: 20px;
  // min-width: 1200px;
  .col_wapper {
    height: 100%;
    margin: 0 !important;
  }
  .col_center {
    height: 100%;
  }

  /deep/.el-table__cell {
    border: none;
  }
  /deep/ .el-table th.el-table__cell.is-leaf {
    border: none;
  }

}
</style>